<template>
	<view>
		<!-- 头部 -->
		<uni-nav-bar fixed :status-bar="true" @clickLeft="goCloud" @clickRight="goCloud">
			<view slot="left" class="navbar-icon icon-font">&#xe77e;</view>
			<view class="top-tab flex-box">
				<view v-for="(item, index) in navList" :class="{ active: curNav == index }" :key="index" @click="switchTab(item.id, index)">{{ item.name }}</view>
			</view>
			<!-- #ifdef APP-PLUS || H5 -->
			<view slot="right" class="navbar-icon icon-font">&#xe649;</view>
			<!-- #endif -->
		</uni-nav-bar>

		<!-- 内容区 -->
		<mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" @up="upCallback" :up="upOption">
			<view class="date-bar flex-box">
				<view class="date-bar-left">
					<view class="flex-box">
						云村热评墙
						<view class="icon-font">&#xe731;</view>
					</view>
					<swiper class="date-bar-swipe" autoplay interval="3000" circular vertical>
						<swiper-item class="ellipsis" v-for="(item, index) in hotwallList" :key="index">{{ item.content }}</swiper-item>
					</swiper>
				</view>
				<view>
					<view>{{ curDate[1] }}.</view>
					<view class="date-bar-num">{{ curDate[2] }}</view>
				</view>
			</view>

			<view class="list-content flex-box">
				<!-- 左边/第一列 -->
				<view class="video-list">
					<view class="video-item" v-for="(item, index) in videoList1" :key="index">
						<view class="item-wrap">
							<image class="img" :src="item.coverUrl + $imgSuffix" mode="widthFix"></image>

							<view class="desc">{{ item.title }}</view>
							<view class="creater-bar flex-box">
								<view class="avactor-box flex-box">
									<view class="avactor" src=""></view>
									<view class="name">{{ item.creator[0].userName }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 右边/第二列 -->
				<view class="video-list">
					<view class="video-item" v-for="(item, index) in videoList2" :key="index">
						<view class="item-wrap">
							<image class="img" :src="item.coverUrl + $imgSuffix" mode="widthFix"></image>
							<view class="desc">{{ item.title }}</view>
							<view class="creater-bar flex-box">
								<view class="avactor-box flex-box">
									<view class="avactor" src=""></view>
									<view class="name">{{ item.creator[0].userName }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar/uni-nav-bar.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { listHotwall } from '@/api/cloud.js';
import { allvideo } from '@/api/video.js';

export default {
	mixins: [MescrollMixin],
	data() {
		return {
			downOption: {
				auto: false
			},
			upOption: {
				auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				}
			},
			navList: [
				{
					name: '广场',
					id: 3452
				},
				{
					name: '动态',
					id: 3462
				}
			],
			curNav: 1,
			curDate: [],
			hotwallList: [],
			videoList1: [],
			videoList2: [],
			msgList: [
				{
					name: '他是我见过最年少有为的人',
					id: ''
				},
				{
					name: '因为一个人而失眠，这真的好吗',
					id: ''
				},
				{
					name: '花开花落，没有悲愁怎么是少年？',
					id: ''
				}
			]
		};
	},
	onLoad() {
		this.curDate = String(new Date()).split(' ');
		this.switchTab(3245, 1);
		this._listHotwall();
		this.downCallback();
	},
	methods: {
		goCloud() {
			this.$pubFuc.showToast('暂未开放');
		},
		switchTab(id, index) {
			this.curNav = index;
			this.downCallback();
		},

		// mescroll 初始化
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		// 下拉刷新函数
		downCallback() {
			var that = this;
			this._allvideo(this.navList[this.curNav].id, data => {
				if (data) {
					this.videoList1 = [];
					this.videoList2 = [];
					this._formatVideoList(data);
				}
				that.mescroll.endSuccess();
			});
		},
		/*上拉加载的回调*/
		upCallback(page) {
			var that = this;
			var timestamp = new Date().getTime();
			this._allvideo(this.navList[this.curNav].id, data => {
				if (data) {
					this._formatVideoList(data);
				}
				that.mescroll.endSuccess();
			});
		},

		_formatVideoList(data) {
			for (var i = 0; i < data.length; i++) {
				if (this.videoList1.length === this.videoList2.length) {
					this.videoList1.push(data[i]);
				} else {
					this.videoList2.push(data[i]);
				}
			}
		},

		_allvideo(id, callback) {
			var timestamp = new Date().getTime();
			allvideo({
				id,
				timestamp
			})
				.then(res => {
					res.data.forEach(e => {
						e.coverUrl = e.coverUrl.replace('http:', 'https:');
					});
					callback(res.data);
				})
				.catch(res => {
					callback();
				});
		},

		_listHotwall() {
			listHotwall().then(res => {
				this.hotwallList = res.data;
			});
		}
	},
	components: {
		uniNavBar
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}

.top-tab {
	width: 310rpx;
	/* #ifdef MP-WEIXIN */
	width: 250rpx;
	/* #endif */
	margin: 0 auto;
	justify-content: space-between;

	.active {
		color: #f32628;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			width: 94rpx;
			height: 4rpx;
			bottom: 0;
			left: 50%;
			background-color: #f32628;
			transform: translateX(-50%);
			border-radius: 4rpx;
		}
	}
}

.date-bar {
	margin: 20rpx auto;
	width: 700rpx;
	height: 170rpx;
	color: #fff;

	line-height: 70rpx;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 15rpx;
	font-weight: 600;
	padding: 20rpx 34rpx;

	.date-bar-left {
		width: 600rpx;
		font-size: 34rpx;
	}

	.date-bar-num {
		font-size: 34rpx;
		margin-top: -20rpx;
	}

	.date-bar-swipe {
		width: 480rpx;
		height: 40rpx;
		color: #999;
		font-size: 20rpx;
		line-height: 40rpx;
	}
}

.list-content {
	width: 700rpx;
	margin: 0 auto;
	flex-direction: row;
	justify-content: space-between;

	.video-list {
		width: 340rpx;
		flex-direction: column;
	}

	.video-item {
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		color: #353536;
		line-height: 36rpx;
	}

	.img {
		display: block;
		width: 100%;
		/* min-height: 188rpx; */
	}

	.desc {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		padding: 10rpx 20rpx;
	}

	.creater-bar {
		align-items: center;
		color: #999;
		font-size: 20rpx;
		padding: 0 20rpx 20rpx;

		.avactor-box {
			align-items: center;
		}

		.avactor {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			margin-right: 10rpx;

			background-color: #eee;
		}
	}
}
</style>
